<script setup lang="ts">
import mcht from '@/api/mcht'
import { useAppStore, useHomeStore } from '@/store'
import { throttle } from '@/utils/shared.ts'

interface Option {
  text: string
  value: string
}
const {
  windowHeight,
  customBarHeight,
} = storeToRefs(useAppStore())
const { roleFlag } = storeToRefs(useHomeStore())
const mchtNo = ref('')
const shopId = ref('')
onLoad((options: any) => {
  if (options.type) {
    form.deviceType = options.type
  }
  if (options.mchtNo) {
    mchtNo.value = options.mchtNo
    form.id = options.mchtNo
    form.type = 'M'
  }
  if (options.shopId) {
    shopId.value = options.shopId
    form.id = options.shopId
    form.type = 'S'
  }
})

const form = reactive({
  id: mchtNo.value,
  type: 'M',
  self: '1',
  // deviceNumber: '',
  deviceType: '',
})

const typeOptions: Option[] = [
  { text: '智能POS', value: '1' },
  { text: '扫码枪', value: '2' },
  { text: '扫码盒', value: '3' },
  { text: '云音箱', value: '4' },
  { text: '二维码支付终端', value: '6' },
]

function deviceType(type) {
  return {
    1: '智能POS',
    2: '扫码枪',
    3: '扫码盒',
    4: '云音箱',
    6: '二维码支付终端',
  }[type]
}

const total = ref(0)
const page = ref(1)
const pageSize = ref(5)
const loading = ref<boolean>(false)
const end = ref<boolean>(false)
const deviceList = ref([])

const throttledGetList = throttle(getList, 600)

async function query() {
  deviceList.value = []
  // getList(1)
  throttledGetList(1)
}

async function getList(p: number) {
  const pushData: any = {
    pageNum: p,
    pageSize: 10,
    // deviceNumber: form.deviceNumber,
    deviceType: form.deviceType,
  }
  if (shopId.value) {
    pushData.shopId = shopId.value
  }
  else {
    pushData.mchtNo = mchtNo.value
  }
  loading.value = true
  const { data } = await mcht.getDeviceList(pushData)
  loading.value = false
  if (data.status === 'success') {
    total.value = data.data.total
    page.value = data.data.pageNum
    if (p === 1) {
      deviceList.value = data.data.deviceList
    }
    else {
      deviceList.value = deviceList.value.concat(data.data.deviceList)
    }
    if (page.value * pageSize.value >= total.value) {
      end.value = true
    }
    else {
      end.value = false
    }
  }
}

function scrolltolower() {
  if (!end.value) {
    getList(page.value + 1)
  }
}

onMounted(() => {
  getList(1)
})
</script>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationBarTitleText": "设备列表",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<template>
  <div class="query">
    <nut-form>
      <nut-form-item label="设备类型" prop="deviceType">
        <option-select v-model="form.deviceType" title="设备类型" :options="typeOptions" />
      </nut-form-item>
      <!-- <nut-form-item label="设备编号" prop="deviceNumber">
        <nut-input v-model="form.deviceNumber" class="nut-input-text" placeholder="请输入设备编号" type="text" />
      </nut-form-item> -->
      <nut-cell>
        <div style="display: inline-block; margin-right: 10px">
          <nut-button type="primary" size="small" @click="query">查询</nut-button>
        </div>
      </nut-cell>
    </nut-form>
  </div>
  <div class="list">
    <template v-if="deviceList.length > 0">
      <scroll-view scroll-y :style="{ height: `${windowHeight - customBarHeight - 270}px` }"
        @scrolltolower="scrolltolower">
        <div v-for="(item, index) in deviceList" :key="index" class="item">
          <div class="line">
            <div class="key">商户名</div>
            <div class="value">{{ item.mchtName }}</div>
          </div>
          <div class="line">
            <div class="key">商户号</div>
            <div class="value">{{ item.mchtNo }}</div>
          </div>
          <div v-if="item.shopName" class="line">
            <div class="key">门店名</div>
            <div class="value">{{ item.shopName }}</div>
          </div>
          <div v-if="item.shopId" class="line">
            <div class="key">门店号</div>
            <div class="value">{{ item.shopId }}</div>
          </div>
          <div class="line">
            <div class="key">设备类型</div>
            <div class="value">{{ deviceType(item.deviceType) }}</div>
          </div>
          <div class="line">
            <div class="key">设备状态</div>
            <div class="value">{{ item.statusDesc }}</div>
          </div>
        </div>
        <div v-if="end" class="end">没有更多数据了</div>
        <div v-if="loading" class="loading">
          <nut-icon name="loading" />
          数据加载中...
        </div>
      </scroll-view>
    </template>
  </div>
</template>

<style lang="sass" scoped>
.list
  padding: 15px
  .item
    background-color: #fff
    border-radius: 6px
    margin-bottom: 15px
    padding: 15px
    .line
      margin-bottom: 6px
      .key
        display: inline-block
        margin-right: 12px
      .value
        display: inline-block
  .end
    text-align: center
    color: #8e8e8e
  .loading
    text-align: center
    color: #8e8e8e
// 加在页面里才生效
:deep(.nut-switch)
  min-width: 56px!important
:deep(.nut-switch-label.open)
  min-width: 56px!important
  transform: translateX(-13px)!important
:deep(.nut-switch-label.close)
  min-width: 56px!important
  transform: translateX(40px)!important
:deep(.nut-switch-open .nut-switch-button)
  transform: translateX(300%)!important
</style>
